<template>
    <div>
        <vxe-modal ref="md" :id="id" v-model="show" :title="title" width="800" min-width="600" min-height="300" resize
                   remember storage transfer>
            <template #default>
                <vxe-form :data="FormData" title-align="right" title-width="100" @submit="submitProcEvent">
                    <vxe-form-item field="title" title="步骤说明" :span="12" :item-render="{}">
                        <template #default="{ data }">
                            <vxe-input v-model="data.title" placeholder="步骤说明"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item field="condition" span="24" :item-render="{}">

                        <template #default="{ data }">
                            <div>条件:
                                <div style="margin: -30px 0px 5px 60px;}">
                                    <vxe-button size="mini" status="primary" @click="newCondition(-1)" content="新增"></vxe-button>
                                </div>
                            </div>
                            <vxe-table
                                    border
                                    show-overflow
                                    ref="Condition"
                                    :row-config="{useKey: true}"
                                    :scroll-y="{enabled: false}"
                                    :column-config="{resizable: true}"
                                    :data="data.condition||[]"
                                    :edit-config="{trigger: 'dblclick', mode: 'cell'}">
                                <vxe-column type="seq" width="40"></vxe-column>
                                <vxe-column field="field" title="判断字段" width="220" :edit-render="{}">

                                    <template #edit="{ row }">
                                        <div style="display: inline-flex;width: 100%">
                                            <vxe-input v-model="row.val" placeholder="请输入"></vxe-input>
<!--                                            <vxe-select v-model="row.field" placeholder="字段" clearable transfer>-->
<!--                                                <vxe-optgroup v-for="(IT,keys) in sourceFormOption" :key="keys"-->
<!--                                                              :label="IT.name">-->
<!--                                                    <vxe-option v-for="(it,key) in IT.items" :key="key"-->
<!--                                                                :label="it.label" :value="it.value"></vxe-option>-->
<!--                                                </vxe-optgroup>-->
<!--                                            </vxe-select>-->
                                            <!--                                        <vxe-select  style="width: 50%"   v-model="row.changefield" placeholder="参照转换" clearable transfer>-->
                                            <!--                                            <vxe-option label="不转换" :value="0"></vxe-option>-->
                                            <!--                                            <vxe-option label="参照以下转换" disabled=""></vxe-option>-->
                                            <!--                                            <vxe-option   v-for="(it,key) in czType" :key="key" :label="it.label" :value="it.value"></vxe-option>-->
                                            <!--                                        </vxe-select>-->
                                        </div>
                                    </template>
                                </vxe-column>
                                <vxe-column field="where" title="条件" width="100" :edit-render="{}">
                                    <template #default="{ row }">
                                        <span>{{ Filter.find(item=>item.type===row.where)?.title}}</span>
                                    </template>
                                    <template #edit="{ row }">
                                        <vxe-select   v-model="row.where"  placeholder="条件" clearable transfer>
                                            <vxe-option v-for="(it,key) in Filter" :key="key" :label="it.title" :value="it.type"></vxe-option>
                                        </vxe-select>
                                    </template>
                                </vxe-column>
                                <vxe-column field="val" title="条件值" :edit-render="{}">
                                    <template #edit="{ row }">
                                        <vxe-input v-model="row.val" placeholder="请输入"></vxe-input>
                                    </template>
                                </vxe-column>
                                <vxe-column title="操作" width="150" show-overflow>
                                    <template #default="{ row }">
                                        <vxe-button type="text" icon="vxe-icon-delete" @click="$refs.Condition.values.remove(row)">删除</vxe-button>
<!--                                        <vxe-button type="text" icon="vxe-icon-delete" @click="copyRow(row,'FFWhere')">复制</vxe-button>-->
                                    </template>
                                </vxe-column>
                            </vxe-table>


                        </template>
                    </vxe-form-item>
                        <vxe-form-item align="center" title-align="left" :span="24">
                            <template #default>
                                <vxe-button type="submit">提交</vxe-button>
                                <vxe-button type="reset">重置</vxe-button>
                            </template>
                        </vxe-form-item>
                </vxe-form>
            </template>
        </vxe-modal>
    </div>

</template>

<style scoped>

</style>


<script lang="ts">
import {defineComponent, reactive, ref, toRefs, watch} from 'vue';
import {randomString} from '/@/utils/ruoyi';

import XEUtils from 'xe-utils'

export default defineComponent({
    name: 'processedit',
    props: {
        // 节点 id
        id: {
            type: String,
            default: () => 'between_' + randomString(6),
        },

        // 大小
        size: {
            type: String,
            default: () => 'default',
        },
        // 内容框默认 placeholder
        placeholder: {
            type: String,
            default: () => '请输入内容',
        },
        // 内容框默认 separator
        title: {
            type: String,
            default: () => '新增',
        },
        // 双向绑定
        // 双向绑定值，字段名为固定，改了之后将不生效
        // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
        modelValue: {
            type: Object,
            default: () => {
            },
        },
    },
    setup(props, {emit}) {
        const md = ref()
        const Condition = ref()
        const Todo = ref()
        const state = reactive({
            FormData: {}, show: false,
            Filter: [{type: '=', title: '等于'}, {type: '<>', title: '不等于'}, {type: '<', title: '小于'},
                {type: '<=',title: '小于等于'}, {type: '>', title: '大于'}, {type: '>=', title: '大于等于'},
                {type: 'like', title: '包含'}, {type: 'in',title: '在列表中'}, {type: 'is null',title: '为空'}, {type: 'is not null',title: '不为空'}],

        })
        // 监听双向绑定值的改变
        // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
        watch(
            () => props.modelValue,
            (value) => {
                state.FormData = props.modelValue
            }
        );
        const submitProcEvent = () => {
            emit('update:modelValue', state.FormData);
        }
        const newCondition= async (row:number)=>{
            const $table = Condition.value
            const record = {
                def: '0',
                field: null,
                where:'==',
                changefield:0,
                changevalue:0,
                val:null,
                value:null
            }
            const { row: newRow } = await $table.insertAt(record, row)
            await $table.setEditCell(newRow, 'def')

        }
        return {
            submitProcEvent,newCondition,Condition,
            ...toRefs(state), md
        };
    },
});
</script>
